<template>
  <div class="content-cont">
    <div class="content-cont-header">
      <div class="header-div">
        <div class="title">消防系统管理平台</div>
        <div class="caidan">
          <div class="caidanitem" @click="$router.push('/aboutcompany')">
            <icon-svg type="tubiao-bingtu" size="40px"></icon-svg>
            后台
          </div>
          <div class="caidanitem" @click="loginOut()">
            <icon-svg type="fanshe" size="40px"></icon-svg>
            退出
          </div>
        </div>
        <div class="shijian"><h1>{{hour}}</h1><h2>{{date}}</h2></div>
      </div>
    </div>
    <div class="content-cont-bottom">
      <databox :title="''" :dheight="'100%'">
        <div class="contentdiv">
          <div class="contentbottomitem">
            <span style="font-size: 30px;">{{250}}</span>公里
            <div class="contentbottom">监控总里程</div>
          </div>
          <div style="float:left;width: 1px;height: 50px; background: #fff;"></div>
          <div class="contentbottomitem">
            <span style="font-size: 30px;">{{250}}</span>个
            <div class="contentbottom">单位</div>
          </div>
          <div style="float:left;width: 1px;height: 50px; background: #fff;"></div>
          <div class="contentbottomitem">
            <span style="font-size: 30px;">{{250}}</span>
            <div class="contentbottom">监控设备</div>
          </div>
          <div style="float:left;width: 1px;height: 50px; background: #fff;"></div>
          <div class="contentbottomitem">
            <span style="font-size: 30px;">{{250}}</span>万条
            <div class="contentbottom">处理数据</div>
          </div>
        </div>
      </databox>
    </div>
  </div>
</template>

<script>
import flow from "./chart/flow";
import { clearInterval } from 'timers';
import userService from 'services/userService'

export default {
  components: {
    flow
  },
  props: {},
  data() {
    return {
      hour: '',
      date: ''
    };
  },
  beforeDestroy(){
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  mounted() {
    let _this = this
    this.timer = setInterval(function() {
      _this.date = new Date().toLocaleDateString(); //修改数据date
      _this.hour = new Date().toLocaleTimeString(); //修改数据date
      if (_this.hour.includes("下午")) {
        let finres = _this.hour.replace("下午", "");
        let finres_arr = finres.split(" ");
        let timee = finres_arr[1].split(":");
        timee[0] = Number(timee[0]) + 12 + "";
        finres_arr[1] = timee.join(":");
        _this.hour = finres_arr.join(" ");
      } else {
        _this.hour = _this.hour.replace("上午", "");
      }
    }, 1000);
  },
  methods: {
    loginOut() {
                let _this = this
                this.$confirm("此操作将退出系统, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        // this.$store.dispatch("loginOut").then(() => {
                        //     location.reload(); // 为了重新实例化vue-router对象 避免bug
                        // });
                        // userService.logout({logout: this.$store.getters.token}).then(res => {
                            sessionStorage.removeItem('oauth');
                            _this.$store.dispatch("loginOut")
						    // this.$store.dispatch('loginName', {access_token: ''})
                            _this.$router.push('/login');

                        // })

                    })
                    .catch(() => {
                        this.$message({
                            type: "error",
                            message: "操作失败"
                        });
                    });
            },
  },
  watch: {}
};
</script>

<style lang="scss" scoped>
.content-cont {
  .content-cont-header {
    position: absolute;
    // bottom: 0px;
    width: 58%;
    height: 8%;
    .header-div {
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0px 50px;
      .title{
        padding: 10px;
        width: 60%;
        text-align: center;
        height: 100%;
        font-size: 40px;
        background-image: url(../../../assets/img/title-bg.png);
      }
      .caidan{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 15%;
        .caidanitem{
          display: flex;
          flex-direction: column;
          text-align: center;
          cursor: pointer;
        }
      }
      .shijian{
        background-image: url(../../../assets/img/time-bg.png);
        text-align: center;
        padding: 10px;
      }

    }
  }
  .content-cont-bottom {
    position: absolute;
    bottom: 0px;
    width: 58%;
    height: 10%;
    .contentdiv {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 20px 50px;
      .contentbottomitem {
        text-align: center;
        .contentbottom {
          font-size: 20px;
        }
      }
    }
  }
}
</style>